<template>
  <div class="header justify-content-between">
    <div class="align-item-center">
      <img class="logo" src="../assets/images/logo.png" />
      <div class="fs32 colorFFF">综合试验系统管理端</div>
      <!-- <div class="version fs20 colorFFF">V1.0.3</div> -->
    </div>
    <!-- <div class="align-item-center">
      <input
        class="search-input fs20"
        type="text"
        placeholder="请输入任务名称"
        v-model="keyWords"
      />
      <div class="search-btn fs20 colorFFF" @click="search">搜索</div>
    </div> -->
    <div class="align-item-center">
      <div class="align-item-center cursor-pointer">
        <img class="head" src="../assets/images/icon-head-dft.png" />
        <span class="fs24 colorFFF">{{ username }}</span>
        <div class="triangle"></div>
      </div>
      <div class="align-item-center ml47 cursor-pointer" @click="exitLogin">
        <img class="exit" src="../assets/images/icon-exit.png" />
        <span class="fs24 colorFFF">关闭</span>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/assets/js/bus.js";
export default {
  name: "Header",
  data() {
    return {
      username: "", //用户名
      keyWords: "", //搜索关键词
    };
  },
  created() {
    // this.username = sessionStorage.getItem("username");
    this.username = this.$route.query.userName ? this.$route.query.userName : 'admin'
  },
  methods: {
    // 搜索
    search() {
      Bus.$emit("search", this.keyWords);
    },
    // 退出登录
    exitLogin() {
      // this.$router.push("/");
      window.close()
    },
  },
};
</script>

<style scoped lang='less'>
.header {
  width: 100%;
  height: .72rem;
  background-color: #285fe3;
  background-image: url(../assets/images/header-bg.png);
  background-size: 100% 100%;
  padding: 0 .49rem 0 .98rem;
  .logo {
    width: .54rem;
    height: .54rem;
    margin-right: .24rem;
    position: relative;
    top: .02rem;
  }
  .version {
    width: .86rem;
    height: .32rem;
    line-height: .3rem;
    text-align: center;
    background-image: url(../assets/images/version-bg.png);
    background-size: 100% 100%;
    margin-left: .17rem;
    position: relative;
    top: .02rem;
  }
  .search-input {
    width: 3.4rem;
    height: .38rem;
    background: #1e55c6;
    border: 1px solid #6192f7;
    border-radius: .19rem;
    padding-left: .2rem;
    color: #6192f7;
  }
  .search-input::placeholder {
    color: #6192f7;
  }
  .search-btn {
    width: 1.06rem;
    height: .38rem;
    background-color: #285fe3;
    border-radius: .19rem;
    margin-left: .09rem;
    line-height: .38rem;
    text-align: center;
    cursor: pointer;
  }
  .head {
    width: .24rem;
    height: .3rem;
    margin-right: .15rem;
  }
  .triangle {
    width: 0;
    height: 0;
    border-top: .08rem solid #fff;
    border-right: .08rem solid transparent;
    border-left: .08rem solid transparent;
    margin-left: .13rem;
  }
  .exit {
    width: .28rem;
    height: .3rem;
    margin-right: .15rem;
  }
}
</style>
